<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意见反馈管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/css/layui.css">
    <style>
        .layui-table-cell {
            height: auto;
            line-height: 1.6;
        }
        .status-badge {
            padding: 2px 8px;
            border-radius: 3px;
            color: #fff;
            font-size: 12px;
        }
        .status-pending { background-color: #ff9800; }
        .status-processed { background-color: #4caf50; }
        .image-preview img {
            max-width: 100px;
            max-height: 100px;
            margin: 5px;
            border-radius: 5px;
            cursor: pointer;
        }
        .detail-panel {
            padding: 20px;
            background: #f8f8f8;
            border-radius: 5px;
            margin-bottom: 15px;
        }
        .detail-item {
            margin-bottom: 10px;
        }
        .detail-label {
            font-weight: bold;
            color: #333;
            width: 120px;
            display: inline-block;
        }
        .content-text {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="layui-container" style="margin-top: 20px;">
        <div class="layui-row">
            <div class="layui-col-xs12">
                <!-- 页面标题和操作区 -->
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h2>意见反馈管理</h2>
                    </div>
                    <div class="layui-card-body">
                        <!-- 筛选条件 -->
                        <div class="layui-form layui-row layui-col-space10" lay-filter="searchForm">
                            <div class="layui-col-md3">
                                <select name="status" lay-filter="statusFilter">
                                    <option value="">全部状态</option>
                                    <option value="0">待处理</option>
                                    <option value="1">已处理</option>
                                </select>
                            </div>
                            <div class="layui-col-md3">
                                <select name="feedback_type" lay-filter="typeFilter">
                                    <option value="">全部类型</option>
                                    <option value="建议">建议</option>
                                    <option value="投诉">投诉</option>
                                    <option value="表扬">表扬</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                            <div class="layui-col-md4">
                                <input type="text" name="keyword" placeholder="搜索标题或内容" class="layui-input">
                            </div>
                            <div class="layui-col-md2">
                                <button class="layui-btn" lay-submit lay-filter="search">搜索</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 反馈列表 -->
                <div class="layui-card">
                    <div class="layui-card-body">
                        <table class="layui-hide" id="feedbackTable" lay-filter="feedbackTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 详情弹窗 -->
    <div id="detailModal" style="display: none; padding: 20px;">
        <div class="detail-panel">
            <div class="detail-item">
                <span class="detail-label">反馈ID：</span>
                <span id="detail-id"></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">用户ID：</span>
                <span id="detail-user-id"></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">反馈类型：</span>
                <span id="detail-type"></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">标题：</span>
                <span id="detail-title"></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">内容：</span>
                <div id="detail-content" style="margin-top: 10px; padding: 10px; background: white; border-radius: 5px; border: 1px solid #ddd;"></div>
            </div>
            <div class="detail-item">
                <span class="detail-label">联系电话：</span>
                <span id="detail-phone"></span>
            </div>
            <div class="detail-item" id="detail-images-container">
                <span class="detail-label">相关图片：</span>
                <div id="detail-images" class="image-preview"></div>
            </div>
            <div class="detail-item">
                <span class="detail-label">提交时间：</span>
                <span id="detail-created"></span>
            </div>
            <div class="detail-item">
                <span class="detail-label">状态：</span>
                <span id="detail-status"></span>
            </div>
            <div class="detail-item" id="detail-reply-container">
                <span class="detail-label">回复内容：</span>
                <div id="detail-reply" style="margin-top: 10px; padding: 10px; background: white; border-radius: 5px; border: 1px solid #ddd;"></div>
            </div>
        </div>
    </div>

    <!-- 回复弹窗 -->
    <div id="replyModal" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="replyForm">
            <input type="hidden" name="feedback_id" id="reply-feedback-id">
            <div class="layui-form-item">
                <label class="layui-form-label">回复内容</label>
                <div class="layui-input-block">
                    <textarea name="reply" placeholder="请输入回复内容..." class="layui-textarea" style="height: 150px;"></textarea>
                </div>
            </div>
        </form>
    </div>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="refresh">刷新数据</button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="exportData">导出数据</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看详情</a>
        {{# if(d.status == 0) { }}
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="reply">回复处理</a>
        {{# } }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="statusTpl">
        {{# if(d.status == 0) { }}
        <span class="status-badge status-pending">待处理</span>
        {{# } else { }}
        <span class="status-badge status-processed">已处理</span>
        {{# } }}
    </script>

    <script type="text/html" id="contentTpl">
        <div class="content-text" title="{{d.content}}">{{d.content}}</div>
    </script>

    <script type="text/html" id="imagesTpl">
        {{# if(d.images && d.images.length > 0) { }}
        <div class="image-preview">
            {{# layui.each(d.images, function(index, item) { }}
            <img src="{{item}}" alt="反馈图片" onclick="previewImage('{{item}}')">
            {{# }); }}
        </div>
        {{# } else { }}
        <span style="color: #999;">无图片</span>
        {{# } }}
    </script>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.7.6/dist/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'laydate'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var laydate = layui.laydate;

            // 初始化表格
            table.render({
                elem: '#feedbackTable',
                url: '../api/admin/feedback_management.php?action=list',
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'print', 'exports'],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', width: 70, fixed: 'left'},
                    {field: 'user_id', title: '用户ID', width: 80},
                    {field: 'feedback_type', title: '类型', width: 80},
                    {field: 'title', title: '标题', width: 200},
                    {field: 'content', title: '内容', width: 250, templet: '#contentTpl'},
                    {field: 'images', title: '图片', width: 120, templet: '#imagesTpl'},
                    {field: 'contact_phone', title: '联系电话', width: 120},
                    {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                    {field: 'created_at', title: '提交时间', width: 160},
                    {title: '操作', width: 200, toolbar: '#barDemo', fixed: 'right'}
                ]],
                page: true,
                height: 'full-220',
                cellMinWidth: 80,
                done: function(res, curr, count) {
                    // 处理图片数据
                    if (res.data) {
                        res.data.forEach(function(item) {
                            if (item.images) {
                                try {
                                    item.images = JSON.parse(item.images);
                                } catch (e) {
                                    item.images = [];
                                }
                            } else {
                                item.images = [];
                            }
                        });
                    }
                }
            });

            // 头工具栏事件
            table.on('toolbar(feedbackTable)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'refresh':
                        table.reload('feedbackTable');
                        break;
                    case 'exportData':
                        layer.msg('功能开发中...');
                        break;
                }
            });

            // 监听行工具事件
            table.on('tool(feedbackTable)', function(obj){
                var data = obj.data;
                switch(obj.event){
                    case 'detail':
                        showDetail(data);
                        break;
                    case 'reply':
                        showReplyModal(data.id);
                        break;
                    case 'del':
                        layer.confirm('确定要删除这条反馈吗？', function(index){
                            deleteFeedback(data.id, function() {
                                obj.del();
                                layer.close(index);
                                layer.msg('删除成功');
                            });
                        });
                        break;
                }
            });

            // 搜索表单提交
            form.on('submit(search)', function(data){
                table.reload('feedbackTable', {
                    where: data.field,
                    page: {curr: 1}
                });
                return false;
            });

            // 状态筛选
            form.on('select(statusFilter)', function(data){
                table.reload('feedbackTable', {
                    where: {status: data.value},
                    page: {curr: 1}
                });
            });

            // 类型筛选
            form.on('select(typeFilter)', function(data){
                table.reload('feedbackTable', {
                    where: {feedback_type: data.value},
                    page: {curr: 1}
                });
            });

            // 回复表单提交
            form.on('submit(replySubmit)', function(data){
                replyFeedback(data.field);
                return false;
            });

            // 显示详情
            function showDetail(data) {
                document.getElementById('detail-id').textContent = data.id;
                document.getElementById('detail-user-id').textContent = data.user_id;
                document.getElementById('detail-type').textContent = data.feedback_type || '无';
                document.getElementById('detail-title').textContent = data.title;
                document.getElementById('detail-content').textContent = data.content;
                document.getElementById('detail-phone').textContent = data.contact_phone || '未提供';
                document.getElementById('detail-created').textContent = data.created_at;
                document.getElementById('detail-status').innerHTML = data.status == 0 ? 
                    '<span class="status-badge status-pending">待处理</span>' : 
                    '<span class="status-badge status-processed">已处理</span>';

                // 处理图片
                var imagesContainer = document.getElementById('detail-images');
                if (data.images && data.images.length > 0) {
                    var imagesHtml = '';
                    data.images.forEach(function(img) {
                        imagesHtml += '<img src="' + img + '" alt="反馈图片" onclick="previewImage(\'' + img + '\')">';
                    });
                    imagesContainer.innerHTML = imagesHtml;
                    document.getElementById('detail-images-container').style.display = 'block';
                } else {
                    document.getElementById('detail-images-container').style.display = 'none';
                }

                // 处理回复
                if (data.reply) {
                    document.getElementById('detail-reply').textContent = data.reply;
                    document.getElementById('detail-reply-container').style.display = 'block';
                } else {
                    document.getElementById('detail-reply-container').style.display = 'none';
                }

                layer.open({
                    type: 1,
                    title: '反馈详情',
                    area: ['800px', '600px'],
                    content: document.getElementById('detailModal').innerHTML,
                    shadeClose: true
                });
            }

            // 显示回复弹窗
            function showReplyModal(feedbackId) {
                document.getElementById('reply-feedback-id').value = feedbackId;
                layer.open({
                    type: 1,
                    title: '回复反馈',
                    area: ['600px', '400px'],
                    content: document.getElementById('replyModal').innerHTML,
                    btn: ['提交回复', '取消'],
                    yes: function(index) {
                        var reply = layer.getChildFrame('textarea[name="reply"]', index).val();
                        if (!reply.trim()) {
                            layer.msg('请输入回复内容');
                            return;
                        }
                        replyFeedback({
                            feedback_id: feedbackId,
                            reply: reply
                        }, function() {
                            layer.close(index);
                            table.reload('feedbackTable');
                        });
                    }
                });
            }

            // 回复反馈
            function replyFeedback(data, callback) {
                fetch('../api/admin/feedback_management.php?action=reply', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(result => {
                    if (result.code === 200) {
                        layer.msg('回复成功');
                        if (callback) callback();
                    } else {
                        layer.msg(result.message || '回复失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    layer.msg('回复失败');
                });
            }

            // 删除反馈
            function deleteFeedback(id, callback) {
                fetch('../api/admin/feedback_management.php?action=delete', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({id: id})
                })
                .then(response => response.json())
                .then(result => {
                    if (result.code === 200) {
                        if (callback) callback();
                    } else {
                        layer.msg(result.message || '删除失败');
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    layer.msg('删除失败');
                });
            }
        });

        // 预览图片
        function previewImage(src) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: 'auto',
                skin: 'layui-layer-nobg',
                shadeClose: true,
                content: '<img src="' + src + '" style="max-width: 100%; max-height: 100%;">'
            });
        }
    </script>
</body>
</html>